<template>
  <div class="home">
    <div class="search">
      <div class="input">
        <span class="mui-icon mui-icon-search"></span>
        <input type="text" placeholder="搜索视频或者用户">
      </div>
      <div class="wuman">添加</div>
    </div>
    <div class="widthList">
      <span v-for="(item,index) in widthList" :class="widthListIndex==index?'red':'blank'"
            @click="widthListCentent(index,item.id)">{{item.text}}</span>
    </div>
    <video-list :listArray="WidthVideoList"></video-list>

    <div style="margin: 10px 0">
      <button @click="increment">{{$t('increase')}}</button>
      <button @click="decrement">{{$t('reduce')}}</button>
      <button @click="incrementAs">{{$t('RLDRAM')}}</button>
      <div>{{Numbers}}{{$t(isEvenOrOdd)}}</div>
    </div>
  </div>
</template>

<script>
  import {mapGetters, mapActions} from 'vuex';
  import VideoList from '@/components/AppMask/VideoList';

  export default {
    name: 'home',
    data() {
      return {
        widthListIndex: 2,
        widthList: [
          {text: '热门', id: '1001'},
          {text: '推荐', id: '1002'},
          {text: '关注', id: '1003'},
          {text: '游戏', id: '1004'},
          {text: '瑜伽', id: '1005'},
          {text: '音乐', id: '1006'},
          {text: '跳舞', id: '1007'},
          {text: '唱歌', id: '1008'},
        ],
        WidthVideoList: [
          {
            id: 1,
            timer: "13:33",
            image: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            headPhone: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            name: "刘五",
            attention: 0,
            details: "最新动态最新动态最新动态最新动态最新动态最新动态最新动态最新动态最新动态最新动态最新动态最新动态最新动态",
            heart: 0,
            heartNum: 5632
          },
          {
            id: 2,
            timer: "17:40",
            image: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            headPhone: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            name: "张三",
            attention: 1,
            details: "最新动态最新动态最新动态最新动态最新动态",
            heart: 1,
            heartNum: 3622
          },
          {
            id: 3,
            timer: "20:40",
            image: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            headPhone: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            name: "张三",
            attention: 1,
            details: "最新动态最新动态最新动态最新动态最新动态",
            heart: 0,
            heartNum: 3622
          },
          {
            id: 3,
            timer: "20:40",
            image: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            headPhone: "http://img5.imgtn.bdimg.com/it/u=2941547468,10478085&fm=26&gp=0.jpg",
            name: "张三",
            attention: 0,
            details: "最新动态最新动态最新动态最新动态最新动态",
            heart: 1,
            heartNum: 3622
          }
        ]
      }
    },
    components: {
      VideoList
    },
    computed: {
      ...mapGetters(['Numbers', 'isEvenOrOdd'])
    },
    mounted() {

    },
    methods: {
      ...mapActions(['increment', 'decrement', 'incrementAs']),
      widthListCentent(index, id) {
        this.widthListIndex = index;
        console.log(id);
      },
    }
  }
</script>
<style scoped lang="scss">
  .home {
    width: 100%;
    height: 100%;
    background: white;

    .search {
      width: 100%;
      height: 45px;
      display: flex;
      margin: 10px 0 0px 0;
      padding-left: 10px;
      justify-content: space-between;
      align-items: center;

      .input {
        flex: 1;
        background: #f3f3f3;
        position: relative;

        span {
          position: absolute;
          left: 5px;
          top: 20%;
        }
        input {
          margin: 0;
          padding-left: 35px;
          font-size: 14px;
        }
      }
      .wuman {
        width: 50px;
        text-align: center;
      }
    }

    .widthList {
      width: 100%;
      height: 35px;
      display: flex;
      overflow: auto;
      span {
        display: inline-block;
        min-width: 60px;
        height: 100%;
        text-align: center;
        font-weight: bold;
        line-height: 35px;
      }
      .blank {
        font-size: 15px;
        font-weight: normal;
        color: #000;
      }
      .red {
        font-size: 17px;
        font-weight: bold;
        color: red;
      }
    }
    .widthList::-webkit-scrollbar {
      width: 0;
      height: 0;
      border: none;
    }

  }
</style>
